टूलटिप कार्यान्वयन: होवर और फ़ोकस सुलभ जानकारी

टूलटिप्स छोटे, प्रासंगिक सहायता संदेश होते हैं जो तब दिखाई देते हैं जब कोई उपयोगकर्ता अपने माउस पॉइंटर को किसी तत्व पर होवर करता है या उस पर फ़ोकस करता है। वे अतिरिक्त जानकारी प्रदान कर सकते हैं, किसी तत्व के उद्देश्य को स्पष्ट कर सकते हैं, या किसी सुविधा का उपयोग करने के तरीके पर संकेत दे सकते हैं। हालांकि, अगर सही तरीके से लागू नहीं किया गया तो टूलटिप्स आसानी से एक्सेसिबिलिटी के लिए एक बुरा सपना बन सकते हैं। यह गाइड ऐसे टूलटिप्स बनाने के लिए सर्वोत्तम प्रथाओं की रूपरेखा प्रस्तुत करता है जो विकलांग उपयोगकर्ताओं सहित सभी के लिए उपयोग करने योग्य हों।

टूलटिप्स के लिए एक्सेसिबिलिटी क्यों महत्वपूर्ण है

एक्सेसिबिलिटी केवल अनुपालन के बारे में नहीं है; यह सभी के लिए एक बेहतर उपयोगकर्ता अनुभव बनाने के बारे में है। जब टूलटिप्स सुलभ नहीं होते हैं, तो यह उन उपयोगकर्ताओं को बाहर कर सकता है जो स्क्रीन रीडर, कीबोर्ड नेविगेशन, या स्पीच इनपुट जैसी सहायक तकनीकों पर निर्भर करते हैं। इन परिदृश्यों पर विचार करें:

• स्क्रीन रीडर उपयोगकर्ता: यदि कोई टूलटिप ठीक से मार्कअप नहीं किया गया है, तो स्क्रीन रीडर उसकी उपस्थिति या सामग्री की घोषणा नहीं कर सकता है।
• कीबोर्ड उपयोगकर्ता: यदि कोई टूलटिप केवल होवर पर दिखाई देता है, तो कीबोर्ड उपयोगकर्ता इसे एक्सेस नहीं कर पाएंगे।
• मोटर विकलांगता वाले उपयोगकर्ता: होवर इंटरैक्शन के लिए आवश्यक सटीक माउस मूवमेंट चुनौतीपूर्ण या असंभव हो सकता है।
• संज्ञानात्मक विकलांगता वाले उपयोगकर्ता: एक खराब समय वाला या भ्रमित करने वाला टूलटिप निराशा पैदा कर सकता है और समझ में बाधा डाल सकता है।

एक्सेसिबिलिटी की सर्वोत्तम प्रथाओं का पालन करके, हम यह सुनिश्चित कर सकते हैं कि टूलटिप्स सभी के लिए उपयोगकर्ता अनुभव को बाधित करने के बजाय उसे बढ़ाएं।

सुलभ टूलटिप्स के लिए मुख्य सिद्धांत

सुलभ टूलटिप्स बनाने के लिए निम्नलिखित सिद्धांत महत्वपूर्ण हैं:

1. वैकल्पिक पहुँच प्रदान करें: सुनिश्चित करें कि टूलटिप्स होवर और कीबोर्ड फ़ोकस दोनों के माध्यम से सुलभ हों।
2. ARIA एट्रिब्यूट्स का उपयोग करें: सहायक तकनीकों को टूलटिप्स की सही पहचान और वर्णन करने के लिए ARIA (Accessible Rich Internet Applications) एट्रिब्यूट्स का उपयोग करें।
3. फ़ोकस प्रबंधित करें: जब कोई टूलटिप प्रदर्शित और छिपाया जाता है, तो फ़ोकस कहाँ जाता है, इसे नियंत्रित करें।
4. पर्याप्त कंट्रास्ट सुनिश्चित करें: टूलटिप टेक्स्ट और पृष्ठभूमि के बीच पर्याप्त रंग कंट्रास्ट प्रदान करें।
5. पर्याप्त समय दें: उपयोगकर्ताओं को टूलटिप सामग्री पढ़ने के लिए पर्याप्त समय दें।
6. उन्हें खारिज करने योग्य बनाएं: टूलटिप को खारिज करने का एक स्पष्ट तरीका प्रदान करें।
7. अति प्रयोग से बचें: टूलटिप्स का संयम से और केवल आवश्यक होने पर उपयोग करें।

कार्यान्वयन तकनीकें

1. होवर और फ़ोकस का उपयोग करना

सुलभ टूलटिप्स का सबसे महत्वपूर्ण पहलू यह सुनिश्चित करना है कि वे माउस और कीबोर्ड दोनों उपयोगकर्ताओं के लिए सुलभ हों। इसका मतलब है कि टूलटिप होवर पर और जब तत्व को फ़ोकस मिलता है, दोनों पर दिखाई देना चाहिए।

HTML:

            <a href="#" aria-describedby="tooltip-example">Example Link</a>
<div id="tooltip-example" role="tooltip" style="display: none;">This is an example tooltip.</div>
            

              
                Copy
              
            
          

CSS:

            a:hover + div[role="tooltip"],
a:focus + div[role="tooltip"] {
  display: block;
  position: absolute;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 5px;
  z-index: 1000; /* Ensure the tooltip is on top */
}

            

              
                Copy
              
            
          

स्पष्टीकरण:

• aria-describedby: यह एट्रिब्यूट लिंक को उसके ID का उपयोग करके टूलटिप तत्व से जोड़ता है। यह सहायक तकनीकों को बताता है कि टूलटिप लिंक के बारे में अतिरिक्त जानकारी प्रदान करता है।
• role="tooltip": यह ARIA रोल तत्व को एक टूलटिप के रूप में पहचानता है।
• CSS लिंक पर होवर करने या फ़ोकस करने पर टूलटिप दिखाने के लिए आसन्न सिबलिंग सेलेक्टर (+) का उपयोग करता है।

जावास्क्रिप्ट (उन्नत नियंत्रण - वैकल्पिक):

जबकि CSS सरल दिखाने/छिपाने को संभाल सकता है, जावास्क्रिप्ट अधिक मजबूत नियंत्रण की अनुमति देता है, खासकर जब टूलटिप्स गतिशील रूप से उत्पन्न होते हैं या अधिक जटिल व्यवहार की आवश्यकता होती है।

            const link = document.querySelector('a[aria-describedby="tooltip-example"]');
const tooltip = document.getElementById('tooltip-example');

link.addEventListener('focus', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('blur', () => {
  tooltip.style.display = 'none';
});

link.addEventListener('mouseover', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('mouseout', () => {
  tooltip.style.display = 'none';
});
            

              
                Copy
              
            
          

2. ARIA एट्रिब्यूट्स का उपयोग करना

ARIA एट्रिब्यूट्स सहायक तकनीकों को सिमेंटिक जानकारी प्रदान करने के लिए आवश्यक हैं। यहाँ प्रमुख एट्रिब्यूट्स का विवरण दिया गया है:

• aria-describedby: जैसा कि पहले उल्लेख किया गया है, यह एट्रिब्यूट ट्रिगर करने वाले तत्व और टूलटिप तत्व के बीच संबंध स्थापित करता है।
• role="tooltip": यह एट्रिब्यूट स्पष्ट रूप से तत्व को एक टूलटिप के रूप में परिभाषित करता है।
• aria-hidden="true"/aria-hidden="false": इनका उपयोग यह इंगित करने के लिए करें कि टूलटिप वर्तमान में सहायक तकनीकों के लिए दृश्यमान है या नहीं। जब टूलटिप छिपा हो, तो aria-hidden="true" सेट करें। जब यह दिखाई दे, तो aria-hidden="false" सेट करें। यह विशेष रूप से तब महत्वपूर्ण है जब टूलटिप की दृश्यता को नियंत्रित करने के लिए जावास्क्रिप्ट का उपयोग किया जाता है।

उदाहरण:

            <button aria-describedby="help-tooltip">Submit</button>
<div id="help-tooltip" role="tooltip" aria-hidden="true">Click here to submit the form.</div>
            

              
                Copy
              
            
          

जावास्क्रिप्ट (aria-hidden के लिए):

            const button = document.querySelector('button[aria-describedby="help-tooltip"]');
const tooltip = document.getElementById('help-tooltip');

button.addEventListener('focus', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('blur', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});

button.addEventListener('mouseover', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('mouseout', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});
            

              
                Copy
              
            
          

3. फ़ोकस प्रबंधित करना

जब कोई टूलटिप दिखाई देता है, तो उसे आम तौर पर ट्रिगर करने वाले तत्व से फ़ोकस *नहीं* हटाना चाहिए। फ़ोकस उस तत्व पर रहना चाहिए जिसने टूलटिप को ट्रिगर किया था। यह सुनिश्चित करता है कि कीबोर्ड उपयोगकर्ता अप्रत्याशित बाधाओं के बिना पृष्ठ पर नेविगेट करना जारी रख सकते हैं।

हालांकि, ऐसी स्थितियाँ हो सकती हैं जहाँ आप फ़ोकस को टूलटिप पर ले जाना *चाहते* हैं, खासकर यदि टूलटिप में इंटरैक्टिव तत्व (जैसे, लिंक, बटन) हों। इस मामले में, यह सुनिश्चित करें कि:

• टूलटिप यह इंगित करने के लिए कि उस पर फ़ोकस है, दृष्टिगत रूप से अलग है।
• मूल ट्रिगरिंग तत्व पर फ़ोकस वापस करने का एक स्पष्ट तरीका है (जैसे, टूलटिप के भीतर एक क्लोज बटन)।

अधिकांश मामलों में, सरलता और उपयोगिता के लिए टूलटिप के भीतर ही फ़ोकस प्रबंधन से बचना बेहतर है।

4. पर्याप्त कंट्रास्ट सुनिश्चित करना

पठनीयता के लिए रंग कंट्रास्ट महत्वपूर्ण है। सुनिश्चित करें कि आपके टूलटिप्स में टेक्स्ट का रंग पृष्ठभूमि के रंग के खिलाफ पर्याप्त कंट्रास्ट रखता है। वेब कंटेंट एक्सेसिबिलिटी गाइडलाइंस (WCAG) सामान्य टेक्स्ट के लिए कम से कम 4.5:1 और बड़े टेक्स्ट (18pt या 14pt बोल्ड) के लिए 3:1 के कंट्रास्ट अनुपात की सलाह देता है।

यह सत्यापित करने के लिए कि आपके रंग विकल्प एक्सेसिबिलिटी मानकों को पूरा करते हैं, ऑनलाइन कंट्रास्ट चेकर्स का उपयोग करें। कंट्रास्ट चेकर्स के उदाहरणों में शामिल हैं:

• WebAIM कंट्रास्ट चेकर: https://webaim.org/resources/contrastchecker/
• कूलर्स: https://coolors.co/contrast-checker

उदाहरण (अच्छा कंट्रास्ट):

            .tooltip {
  background-color: #000;
  color: #fff;
}

            

              
                Copy
              
            
          

उदाहरण (खराब कंट्रास्ट):

            .tooltip {
  background-color: #fff;
  color: #eee;
}

            

              
                Copy
              
            
          

5. पर्याप्त समय देना

उपयोगकर्ताओं को टूलटिप सामग्री पढ़ने के लिए पर्याप्त समय चाहिए। ऐसे टूलटिप्स से बचें जो बहुत जल्दी गायब हो जाते हैं। हालांकि कोई जादुई संख्या नहीं है, कुछ सेकंड का न्यूनतम प्रदर्शन समय का लक्ष्य रखें। साथ ही, टूलटिप तब तक दिखाई देना चाहिए जब तक उपयोगकर्ता ट्रिगर करने वाले तत्व पर होवर कर रहा है या उस पर फ़ोकस किया हुआ है। यदि आपको अन्य घटनाओं के कारण टूलटिप को खारिज करने की आवश्यकता है, तो एक संकेतक प्रदान करें कि टूलटिप बंद हो जाएगा।

यदि टूलटिप सामग्री लंबी है, तो उपयोगकर्ता को टूलटिप को मैन्युअल रूप से खारिज करने का एक तरीका प्रदान करने पर विचार करें (जैसे, एक क्लोज बटन या एस्केप कुंजी दबाकर)।

6. उन्हें खारिज करने योग्य बनाना

हालांकि टूलटिप्स अक्सर उपयोगकर्ता के माउस को दूर ले जाने या फ़ोकस हटाने पर स्वचालित रूप से गायब हो जाते हैं, उन्हें मैन्युअल रूप से खारिज करने का एक स्पष्ट तरीका प्रदान करना एक अच्छी प्रथा है, खासकर लंबी टूलटिप्स या इंटरैक्टिव तत्वों वाले टूलटिप्स के लिए।

टूलटिप्स को खारिज करने के तरीके:

• क्लोज बटन: टूलटिप के भीतर एक दृष्टिगत रूप से प्रमुख क्लोज बटन शामिल करें।
• एस्केप कुंजी: उपयोगकर्ताओं को एस्केप कुंजी दबाकर टूलटिप को खारिज करने की अनुमति दें।
• बाहर क्लिक करें: जब उपयोगकर्ता टूलटिप और ट्रिगरिंग तत्व के बाहर कहीं भी क्लिक करता है तो टूलटिप को खारिज करें। (सावधानी के साथ उपयोग करें क्योंकि यह विघटनकारी हो सकता है)।

उदाहरण (क्लोज बटन):

            <div id="my-tooltip" role="tooltip" aria-hidden="true">
  This is my tooltip content.
  <button onclick="hideTooltip()">Close</button>
</div>
            

              
                Copy
              
            
          

उदाहरण (एस्केप कुंजी):

            document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    hideTooltip(); // Replace with your actual hide tooltip function
  }
});

            

              
                Copy
              
            
          

7. अति प्रयोग से बचना

टूलटिप्स का संयम से उपयोग किया जाना चाहिए और केवल तभी जब वे वास्तव में उपयोगी जानकारी प्रदान करते हैं। टूलटिप्स का अति प्रयोग इंटरफ़ेस को अव्यवस्थित कर सकता है, उपयोगकर्ताओं का ध्यान भटका सकता है, और एक निराशाजनक अनुभव पैदा कर सकता है।

टूलटिप्स के विकल्प:

• स्पष्ट लेबल: फॉर्म फ़ील्ड, बटन और लिंक के लिए स्पष्ट और वर्णनात्मक लेबल का उपयोग करें।
• प्रासंगिक सहायता: सीधे इंटरफ़ेस के भीतर, संबंधित तत्वों के पास सहायता टेक्स्ट प्रदान करें।
• सहायता दस्तावेज़ीकरण: अधिक जटिल सुविधाओं के लिए व्यापक सहायता दस्तावेज़ीकरण से लिंक करें।

उन्नत विचार

गतिशील सामग्री

यदि आपकी टूलटिप सामग्री गतिशील रूप से उत्पन्न होती है (उदाहरण के लिए, एपीआई से लोड की गई या उपयोगकर्ता इनपुट के आधार पर अपडेट की गई), तो सुनिश्चित करें कि aria-describedby एट्रिब्यूट और टूलटिप दृश्यता तदनुसार अपडेट की जाती है। इन अपडेट्स को प्रबंधित करने के लिए जावास्क्रिप्ट का उपयोग करें।

पोजिशनिंग

अपने टूलटिप्स की पोजिशनिंग पर ध्यान से विचार करें। उन्हें इस तरह रखने से बचें कि वे महत्वपूर्ण सामग्री को अस्पष्ट करें या लेआउट में बदलाव का कारण बनें। विभिन्न स्क्रीन आकारों और रिज़ॉल्यूशन का ध्यान रखें, और यह सुनिश्चित करने के लिए CSS का उपयोग करें कि टूलटिप्स हमेशा व्यूपोर्ट के भीतर दिखाई दें।

मोबाइल डिवाइस

टूलटिप्स पारंपरिक रूप से होवर इंटरैक्शन पर निर्भर करते हैं, जो टच-आधारित उपकरणों पर उपलब्ध नहीं हैं। मोबाइल उपकरणों के लिए, वैकल्पिक इंटरैक्शन विधियों का उपयोग करने पर विचार करें, जैसे:

• टैप करें: जब उपयोगकर्ता तत्व पर टैप करता है तो टूलटिप प्रदर्शित करें।
• लॉन्ग प्रेस: जब उपयोगकर्ता तत्व पर लॉन्ग-प्रेस करता है तो टूलटिप प्रदर्शित करें।
• फ़ोकस पर दिखाएँ जब तत्व को फ़ोकस मिलता है तो प्रदर्शित करें। यह जावास्क्रिप्ट के साथ प्राप्त किया जा सकता है, टच सपोर्ट की जाँच करके (उदाहरण के लिए, `('ontouchstart' in window)`) और तदनुसार प्रदर्शन व्यवहार को बदलकर।

अपने टूलटिप्स का परीक्षण करना

यह सुनिश्चित करने के लिए कि आपके टूलटिप्स सभी उपयोगकर्ताओं के लिए सुलभ हैं, उनका पूरी तरह से परीक्षण करें। मैनुअल परीक्षण और स्वचालित एक्सेसिबिलिटी परीक्षण टूल के संयोजन का उपयोग करें।

परीक्षण विधियाँ:

• कीबोर्ड नेविगेशन: सत्यापित करें कि टूलटिप्स कीबोर्ड का उपयोग करके सुलभ हैं।
• स्क्रीन रीडर परीक्षण: यह सुनिश्चित करने के लिए कि टूलटिप्स ठीक से घोषित किए गए हैं, एक स्क्रीन रीडर का उपयोग करें।
• रंग कंट्रास्ट विश्लेषण: पर्याप्त कंट्रास्ट को सत्यापित करने के लिए एक रंग कंट्रास्ट चेकर का उपयोग करें।
• मोबाइल परीक्षण: विभिन्न मोबाइल उपकरणों और स्क्रीन आकारों पर टूलटिप्स का परीक्षण करें।
• स्वचालित एक्सेसिबिलिटी परीक्षण: संभावित एक्सेसिबिलिटी समस्याओं की पहचान करने के लिए axe DevTools, WAVE, या Lighthouse जैसे टूल का उपयोग करें।

अंतर्राष्ट्रीयकरण (i18n) और स्थानीयकरण (l10n)

वैश्विक दर्शकों के लिए टूलटिप्स विकसित करते समय, अंतर्राष्ट्रीयकरण और स्थानीयकरण को ध्यान में रखें:

• टेक्स्ट दिशा: बाएं-से-दाएं (LTR) और दाएं-से-बाएं (RTL) दोनों टेक्स्ट दिशाओं का समर्थन करें। लेआउट के लिए भौतिक गुणों (जैसे, `margin-left`, `margin-right`) के बजाय CSS तार्किक गुणों (जैसे, `margin-inline-start`, `margin-inline-end`) का उपयोग करें।
• भाषा-विशिष्ट अनुवाद: विभिन्न भाषाओं के लिए टूलटिप सामग्री का अनुवाद प्रदान करें।
• दिनांक और समय प्रारूप: उपयोगकर्ता के लोकेल के अनुसार दिनांक और समय प्रारूपों को अनुकूलित करें।
• संख्या प्रारूप: विभिन्न क्षेत्रों के लिए उपयुक्त संख्या प्रारूपों का उपयोग करें (जैसे, दशमलव विभाजक, हजारों विभाजक)।

निष्कर्ष

सुलभ टूलटिप्स को लागू करने के लिए सावधानीपूर्वक योजना और विस्तार पर ध्यान देने की आवश्यकता होती है। इस गाइड में उल्लिखित सिद्धांतों और तकनीकों का पालन करके, आप ऐसे टूलटिप्स बना सकते हैं जो उनकी क्षमताओं की परवाह किए बिना सभी के लिए उपयोग करने योग्य हों। याद रखें कि एक्सेसिबिलिटी एक सतत प्रक्रिया है, इसलिए अपने टूलटिप्स का परीक्षण और सुधार करना जारी रखें ताकि यह सुनिश्चित हो सके कि वे आपके सभी उपयोगकर्ताओं की जरूरतों को पूरा करते हैं।

संसाधन

• ARIA ऑथरिंग प्रैक्टिसेस गाइड (APG) - टूलटिप
• वेब कंटेंट एक्सेसिबिलिटी गाइडलाइंस (WCAG) 2.1
• MDN वेब डॉक्स - ARIA